<template>
<!--
 * @FileDescription: 各个学院出入 流量数
 * @author Sun Yan
 * @Date $ 
-->
<div class="academy-body-main-flow-container">
  <module-card-title title="书院各出入口出入流量数">
    <div ref="echartsBox" style="width: 100%;height: 270px"></div>
    <div class="time-list">
      <div class="time-item"
           v-for="(item, index) in timeList"
           @click="changeTime(item)"
           :key="index">{{ item.key }}</div>
    </div>
  </module-card-title>
</div>
</template>
<script>
 import {throttle} from "@u";

 /**
  * @description: 方法描述
  * @param {参数类型} 参数名称
  * @param {参数类型} 参数名称
  * @return void
  */
export default {
    name: "academy-main-flow",
   data() {
     return {
       chart: null,
       timeList: [
         {
            key: '8:00',
         },
         {
           key: '10:00',
         },
         {
           key: '12:00',
         },
         {
           key: '14:00',
         },
         {
           key: '16:00',
         },
         {
           key: '18:00',
         }
       ]
     }
   },

   props: {
     options: {
       type: Object,
       default: function () {
         return   {
           tooltip: {
             trigger: 'axis',
             extraCssText: 'z-index: 2',

             axisPointer: {            // Use axis to trigger tooltip
               type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
             }
           },
           color: ['#52ffff', '#48b87f', '#f7d673'],

           grid: {
             show: true,
             right: 20,
             left: 40,
             top: 50,
             bottom: 50,
             borderWidth:'1',
             borderRightWidth: '0',
             // containLabel: true
           },

           legend: {
             data: ['北里莫', '交换生', '教职工'],
             top: 5,
             right: 0,
             itemHeight: 9,//改变圆圈大小
             // icon: "circle",
             textStyle: {
               color: '#FFF'  // 图例文字颜色
             }
           },
           // legend: {
           //   data: ['交互生', '北里莫', '教职工']
           // },

           yAxis: {
             type: 'category',
             data: ['出入口A', '出入口B', '出入口C', '出入口D', '出入口E'],
             axisLabel: {
               interval: 0,
               // rotate: 50,
               show: true,
               textStyle: {
                 color: '#c2beb8',
               }
             },
             //网格样式
             // splitLine: {
             //   // show: false,
             //   lineStyle: {
             //     color: ['#14364f', '#11233c', '#122b44', '#14314a', '#102c42'],
             //     width: 1,
             //     type: 'solid'
             //   }
             // },
           },

           xAxis: {
             type: 'value',
             //轴文字标签
             axisLabel: {
               interval: 0,
               // rotate: 50,
               show: false,
               textStyle: {
                 color: '#c2beb8',
               },

             },

             nameTextStyle: {
               color: '#B0CEFC',
               padding: 10
             },

             axisLine: {
               show: false
             },

             splitLine: {
               show: false,
               // lineStyle: {
               //   color: ['#14364f', '#11233c', '#122b44', '#14314a', '#102c42'],
               //   width: 1,
               //   type: 'solid'
               // }
             },

           },

           series: [
             {
               name: '交换生',
               type: 'bar',
               stack: 'total',
               label: {
                 show: true,
               },

               itemStyle: {
                 // barBorderColor: 'rgba(0,0,0,0)',
                 // color: 'rgba(0,0,0,0)'
               },

               // emphasis: {
               //   itemStyle: {
               //     barBorderColor: 'rgba(0,0,0,0)',
               //     color: 'rgba(0,0,0,0)'
               //   }
               // },

               emphasis: {
                 focus: 'series'
               },
               data: [320, 302, 301, 334, 390]
             },
             {
               name: '北里莫',
               type: 'bar',
               stack: 'total',
               label: {
                 show: true
               },
               emphasis: {
                 focus: 'series'
               },
               data: [120, 132, 101, 134, 90]
             },
             {
               name: '教职工',
               type: 'bar',
               stack: 'total',
               label: {
                 show: true
               },
               emphasis: {
                 focus: 'series'
               },
               data: [220, 182, 191, 234, 290]
             },
           ]
         };
       }
     }
   },

   watch: {
     options: {
       immediate: true,
       handler: function () {
         this.$nextTick(this.setEchartData());
       }
     }
   },
   created() {
     window.addEventListener("resize", this.mianResize)
   },
   methods: {
     changeTime(query) {
      this.$toast({message: JSON.stringify(query)})
     },

     mianResize: throttle(function () {
       this.$nextTick(_ => {
         const $el = this.$refs.echartsBox || {};
         if ($el.clientHeight === undefined || $el.clientWidth === undefined) return;
         this.chart && this.chart.resize({
           height: `${$el.clientHeight}px`,
           width: `${$el.clientWidth}px`
         });
       })
     }),

     //echart options 数据 完毕调用
     setEchartData() {
       this.$nextTick(_=> {
         const chartDom = this.$refs.echartsBox || {};
         if (this.chart === null) {
           this.chart = echarts.init(chartDom)
           this.chart.setOption(this.options)
         } else {
           this.chart.clear();
           this.chart.setOption(this.options)
         }
       })

     },
   }
}
</script>

<style lang="scss">
.academy-body-main-flow-container {
  position: relative;
  .time-list {
    bottom: 20px;
    padding-left: 40px;
    position: absolute;
    display: flex;
    @include wh(100%, auto);
    .time-item {
      flex: 1;
      font-size: var(--normal-font-size);
      color: $com-color-1;
      cursor: pointer;
      &:hover {
        color: $com-color-info-disable;

      }
    }
  }
}

</style>